<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1000"  destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main class="printMain" ref="printMain">
            <!-- 分成多个表格，每个表格最多28条数据 -->
            <div v-for="(chunk, chunkIndex) in paginatedData" :key="chunkIndex">
                <!-- 每个分页都包含头部信息 -->
                <div class="title">Delivery Order</div>
                <div class="print_flex"> 
                    <div style="width: 33%">Order No: {{detail?.contract_code}}</div>
                    <div style="width: 33%">Order Date: {{detail?.contract_date}}</div>
                    <div style="width: 33%">Car NO: </div>
                </div>
                <div class="print_flex">
                    <div style="width: 33%">Customer: {{customer?.customer_name}}</div>
                    <div style="width: 33%">Phone: {{detail?.mobile}}</div>
                    <div style="width: 33%">Address: {{detail?.address}}</div>
                </div>
                
                <table border="1" style="border-collapse: collapse; width: 100%;">
                    <thead>
                        <tr style="height:25px;line-height: 25px;">
                            <th class="table_border" style="width: 50px">No.</th>
                            <th class="table_border" style="width: 100px">Barcode</th>
                            <th class="table_border" style="width: 100px">Product No.</th>
                            <th class="table_border" style="width: 100px">Design No.</th>
                            <th class="table_border" style="width: 80px">Color</th>
                            <th class="table_border" style="width: 80px">Yds</th>
                            <th class="table_border">Unit price</th>
                            <th class="table_border">Total Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in chunk" :key="index">
                            <td class="table_border" style="width: 50px">{{chunkIndex * 36 + index + 1}}</td>
                            <td class="table_border" style="width: 100px">{{item.roll_code}}</td>
                            <td class="table_border" style="width: 100px">{{item.goods_code}}</td>
                            <td class="table_border" style="width: 100px">{{item.flower}}</td>
                            <td class="table_border" style="width: 80px">{{item.colorName}}</td>
                            <td class="table_border" style="width: 80px">{{item.code_number}}</td>
                            <td class="table_border">{{item.sales_price}}</td>
                            <td class="table_border">{{item.total_price}}</td>
                        </tr>
                        <!-- 只在最后一个表格显示总计行 -->
                        <tr v-if="chunkIndex === paginatedData.length - 1" style="font-weight: bold;font-size: 16px">
                            <td class="table_border" colspan="2">Freight：</td>
                            <td class="table_border">{{detail?.shipping_price}}</td>
                            <td class="table_border">Total Yds: </td>
                            <td class="table_border">{{detail?.total_meters}}</td>
                            <td class="table_border">TotalAmt：</td>
                            <td class="table_border" colspan="2">{{contract_price}}</td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 只在最后一个表格后显示尾部信息 -->
                <div v-if="chunkIndex === paginatedData.length - 1">
                    <div class="title">Customer Balance: {{common.formatNumber(customer?.balance|0)}}</div>
                    <div class="print_flex"> 
                        <div style="width: 33%">Saler: {{create_staff_name}}</div>
                        <div style="width: 33%"></div>
                        <div style="width: 33%">Customer signature：</div>
                    </div>
                </div>
                
                <!-- 在表格之间添加分页符，最后一个表格后不添加 -->
                <div v-if="chunkIndex < paginatedData.length - 1" style="page-break-before: always;"></div>
            </div>
        </el-main>
	</el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				client: false
			},
			mode: "add",
			titleMap: {
				print: '打印',
			},
			visible: false,
            detail: {},
            order_detail: [],
            customer: {},
            contract_price: "",
		}
	},
	mounted() {
	},
	computed: {
        // 将数据分成每28条一组
        paginatedData() {
            const chunkSize = 36;
            const result = [];
            for (let i = 0; i < this.order_detail.length; i += chunkSize) {
                result.push(this.order_detail.slice(i, i + chunkSize));
            }
            return result;
        }
    },
	methods: {
        print(){
            print(this.$refs.printMain)
            setTimeout(()=>{
                this.visible = false
            },500)
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        async setData(data) {
            this.create_staff_name = data.create_staff_name
            this.contract_price = data.contract_price
            var res = await this.$API.business.sale.detail.get({id: data.id});
            this.customer = res.data.customer
            this.detail = res.data;
            let array = []
            res.data.detail.map(item=>{
                array.push({
                    id: item.id,
                    goods_id: item.goods_id,
                    inspect_id: item.inspect_id,
                    roll_code: item.inspect?.roll_code,
                    goods_code: item.inspect?.goods_code,
                    goods_name: item.inspect?.goods_name,
                    number: item.inspect?.number,
                    code_number: item.inspect?.code_number,
                    meter: item.inspect?.meter,
                    folding: item.inspect?.folding?.name,
                    color: item.inspect?.color,
                    colorName: item.inspect?.color_en,
                    flower: item.inspect?.flower,
                    sales_price: item.sales_price,
                    total_price: item.total_price,
                    zd_price: item.zd_price,
                    shipping_cost: item.shipping_cost,

                })
            })
            this.order_detail = array
        },
	}
}
</script>

<style lang="scss" scoped>
.printMain{
    padding: 30px;
}
.title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
    margin: 10px;
}
.print_flex{
    margin: 5px;
}
td{
    text-align: center;
}
.table_border{
    min-width: 50px;
    height: 25px;
}
table{
    font-size: 12px !important;
    tbody{
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
} 
</style>
